<!-- 班级推送 -->
<template>
    <div class="app-container">
        <el-descriptions title="计划信息">
            <el-descriptions-item label="标题">{{info.title}}</el-descriptions-item>
            <el-descriptions-item label="开始时间">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ info.pushDate.slice(0,10) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="持续天数">{{info.last}}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="left">
                <div @mouseover="left=16,right=8">
                    <p>课程推送</p>
                    <el-button
                        type="primary"
                        plain
                        @click="getCourses(),addCourseDialog.isShow=true"
                    >添加课程</el-button>
                    <el-table :data="courses" style="width: 100%" stripe>
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="标题">
                                        <span>{{ props.row.title }}</span>
                                    </el-form-item>
                                    <el-form-item label="讲师">
                                        <span>{{props.row.teacherName}}</span>
                                    </el-form-item>
                                    <el-form-item label="所属分类">
                                        <span>{{ getSubjectName(props.row.subjectId,props.row.subjectParentId) }}</span>
                                    </el-form-item>

                                    <el-form-item label="创建时间">
                                        <span>{{ props.row.gmtCreate }}</span>
                                    </el-form-item>
                                    <br />
                                    <el-form-item label="价格">
                                        <span>{{ props.row.price+"元" }}</span>
                                    </el-form-item>
                                    <el-form-item label="课时">
                                        <span>{{ props.row.lessonNum }}</span>
                                    </el-form-item>
                                    <el-form-item label="购买量">
                                        <span>{{ props.row.buyCount }}</span>
                                    </el-form-item>
                                    <el-form-item label="观看量">
                                        <span>{{ props.row.viewCount}}</span>
                                    </el-form-item>
                                    <br />
                                    <el-form-item label="封面">
                                        <span>
                                            <el-image
                                                style="width: 200px; height: 200px"
                                                :src="props.row.cover"
                                                fit="contain"
                                            ></el-image>
                                        </span>
                                    </el-form-item>
                                    <el-form-item label="描述">
                                        <span v-html="props.row.description"></span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column label="课程标题" prop="title" width="200"></el-table-column>
                        <el-table-column label="封面" width="180">
                            <template slot-scope="scope">
                                <el-image
                                    style="width: 150px; height: 100px"
                                    :src="scope.row.cover"
                                    fit="contain"
                                ></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="讲师">
                            <template slot-scope="scope">{{scope.row.teacherName}}</template>
                        </el-table-column>

                        <el-table-column label="创建时间" prop="gmtCreate" width="180"></el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    type="danger"
                                    size="small"
                                    @click="deleteCoursePush(scope.row.id)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>

            <el-col :span="right">
                <div @mouseover="left=8,right=16">
                    <p>班级推送</p>
                    <el-button
                        type="primary"
                        plain
                        @click="addClassDialog.isShow=true,pageClass()"
                    >添加班级</el-button>
                    <el-table :data="classrooms" style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="宣传语">
                                        <span v-html="props.row.sign"></span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column label="封面" width="200">
                            <template slot-scope="scope">
                                <el-image
                                    style="width: 150px; height: 100px"
                                    :src="scope.row.cover"
                                    fit="contain"
                                ></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="班级名" width="180" prop="name"></el-table-column>
                        <el-table-column label="进入班级的费用" width="180">
                            <template slot-scope="scope">{{scope.row.price +"￥"}}</template>
                        </el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    size="small"
                                    type="danger"
                                    @click="deleteClassPush(scope.row.id)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!--************************添加课程计划对话框***************************-->
        <el-dialog
            title="添加课程"
            :visible.sync="addCourseDialog.isShow"
            width="95%"
            @close="addCourseDialog.pageCourseVo={},addCourseDialog.isShow=false,beginEndTime='',addCourseDialog.multipleSelection=[]"
        >
            <!--******************************检索条件*******************************-->
            <el-form :inline="true" :model="addCourseDialog.pageCourseVo" class="demo-form-inline">
                <el-form-item label="课程标题">
                    <el-input v-model="addCourseDialog.pageCourseVo.title" placeholder="课程标题"></el-input>
                </el-form-item>
                <el-form-item label="讲师" v-if="!isTeacher()||!classId">
                    <el-input v-model="addCourseDialog.pageCourseVo.teacherName" placeholder="讲师名"></el-input>
                </el-form-item>
                <el-form-item label="分类">
                    <el-cascader
                        placeholder="请选择"
                        :options="subjects"
                        v-model="addCourseDialog.pageCourseVo.sub"
                        filterable
                        clearable
                        @change="handleSubjectChange"
                        :props="addCourseDialog.subjectProps"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="beginEndTime"
                        type="datetimerange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getCourses()">查询</el-button>
                </el-form-item>
            </el-form>

            <!--******************************数据*******************************-->
            <el-table
                :data="addCourseDialog.courses"
                style="width: 100%"
                v-loading="addCourseDialog.loading"
                stripe
                @selection-change="handleSelectionChange1"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="标题">
                                <span>{{ props.row.title }}</span>
                            </el-form-item>
                            <el-form-item label="讲师">
                                <span>
                                    <el-avatar size="large" :src="props.row.teacherAvatar"></el-avatar>
                                </span>
                            </el-form-item>
                            <el-form-item label>
                                <span>{{props.row.teacherName}}</span>
                            </el-form-item>

                            <el-form-item label="所属分类">
                                <span>{{ getSubjectName(props.row.subjectId,props.row.subjectParentId) }}</span>
                            </el-form-item>
                            <el-form-item label="状态">
                                <span>
                                    <el-tag type="success" v-if="props.row.status==='Normal'">已发布</el-tag>
                                    <el-tag type="warning" v-else>未发布</el-tag>
                                </span>
                            </el-form-item>
                            <el-form-item label="创建时间">
                                <span>{{ props.row.gmtCreate }}</span>
                            </el-form-item>
                            <br />
                            <el-form-item label="价格">
                                <span>{{ props.row.price+"元" }}</span>
                            </el-form-item>
                            <el-form-item label="课时">
                                <span>{{ props.row.lessonNum }}</span>
                            </el-form-item>
                            <el-form-item label="购买量">
                                <span>{{ props.row.buyCount }}</span>
                            </el-form-item>
                            <el-form-item label="观看量">
                                <span>{{ props.row.viewCount}}</span>
                            </el-form-item>
                            <br />
                            <el-form-item label="封面">
                                <span>
                                    <el-image
                                        style="width: 200px; height: 200px"
                                        :src="props.row.cover"
                                        fit="contain"
                                    ></el-image>
                                </span>
                            </el-form-item>
                            <el-form-item label="描述">
                                <span v-html="props.row.description"></span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="课程标题" prop="title"></el-table-column>
                <el-table-column label="封面">
                    <template slot-scope="scope">
                        <el-image
                            style="width: 150px; height: 100px"
                            :src="scope.row.cover"
                            fit="contain"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="讲师">
                    <template slot-scope="scope">
                        {{scope.row.teacherName}}
                        <br />
                        <el-tooltip placement="top">
                            <div slot="content">
                                <el-image
                                    style="width: 150px; height: 150px"
                                    :src="scope.row.teacherAvatar"
                                    fit="contain"
                                ></el-image>
                            </div>
                            <el-avatar :size="45" fit="contain" :src="scope.row.teacherAvatar"></el-avatar>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status==='Normal'">已发布</el-tag>
                        <el-tag type="warning" v-else>未发布</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="gmtCreate"></el-table-column>
            </el-table>

            <!--******************************分页*******************************-->
            <el-pagination
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                background
                :current-page="addCourseDialog.current"
                :page-sizes="[4, 6, 10]"
                :page-size="addCourseDialog.limit"
                :hide-on-single-page="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="addCourseDialog.total"
            ></el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button
                    @click="addCourseDialog.pageCourseVo={},addCourseDialog.isShow=false,beginEndTime='',addCourseDialog.multipleSelection=[]"
                >取 消</el-button>
                <el-button type="primary" @click="addCourseToPush()">确 定</el-button>
            </span>
        </el-dialog>

        <!--************************添加班级计划对话框***************************-->
        <el-dialog
            title="添加班级"
            :visible.sync="addClassDialog.isShow"
            width="50%"
            @close="addClassDialog.isShow=false,addClassDialog.searchObj={},addClassDialog.multipleSelection=[]"
        >
            <el-form :inline="true" :model="addClassDialog.searchObj" class="demo-form-inline">
                <el-form-item label="班级名">
                    <el-input v-model="addClassDialog.searchObj.name" placeholder="班级名"></el-input>
                </el-form-item>
                <el-form-item label="讲师" v-if="!isTeacher()">
                    <el-select
                        v-model="addClassDialog.searchObj.teacherId"
                        filterable
                        remote
                        clearable
                        reserve-keyword
                        placeholder="老师姓名"
                        :remote-method="remoteMethod"
                    >
                        <el-option
                            v-for="item in teachers"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                            <span style="float: left">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <el-image
                                            style="width: 150px; height: 150px"
                                            :src="item.avatar"
                                            fit="contain"
                                        ></el-image>
                                    </div>
                                    <el-avatar :size="30" fit="contain" :src="item.avatar"></el-avatar>
                                </el-tooltip>
                            </span>
                            <span>{{ item.name }}</span>
                            <span
                                style="float: right; color: #8492a6; font-size: 13px"
                            >{{ item.career }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="pageClass()">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table
                :data="addClassDialog.rooms"
                style="width: 100%"
                @selection-change="handleSelectionChange2"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="宣传语">
                                <span v-html="props.row.sign"></span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="封面" width="200">
                    <template slot-scope="scope">
                        <el-image
                            style="width: 150px; height: 100px"
                            :src="scope.row.cover"
                            fit="contain"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="班级名" width="180" prop="name"></el-table-column>
                <el-table-column label="进入班级的费用" width="180">
                    <template slot-scope="scope">{{scope.row.price +"￥"}}</template>
                </el-table-column>
            </el-table>

            <!--******************************分页*******************************-->
            <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                background
                :current-page="addClassDialog.current"
                :hide-on-single-page="true"
                :page-sizes="[4, 6, 10]"
                :page-size="addClassDialog.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="addClassDialog.total"
            ></el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button
                    @click="addClassDialog.isShow=false,addClassDialog.searchObj={},addClassDialog.multipleSelection=[]"
                >取 消</el-button>
                <el-button type="primary" @click="addClassToPush()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import pushApi from "@/api/course/push";
import { getSubject } from "@/api/course/subject";
import { getById } from "@/api/ucenter/teacher";
import { getTeacherByName } from "@/api/ucenter/teacher";
export default {
    //import引入的组件需要注入到对象中才能使用
    props: ["id"],
    components: {},
    data() {
        //这里存放数据
        return {
            info: {},
            courses: [],
            classrooms: [],
            left: 16,
            right: 8,
            subjects: [],
            beginEndTime: "",
            addCourseDialog: {
                subjectProps: { checkStrictly: true, value: "id" },
                isShow: false,
                pageCourseVo: {
                    sub: "",
                    teacherName: "",
                    subjectId: "",
                    subjectParentId: "",
                    title: "",
                    status: "",
                    beginTime: "",
                    endTime: "",
                },
                //分液器
                current: 1,
                limit: 4,
                total: 0,

                //表格数据
                courses: [],
                loading: true, //表格转圈圈
                multipleSelection: [],
            },
            addClassDialog: {
                searchObj: {},
                teachers: [],
                //分液器
                current: 1,
                limit: 4,
                total: 0,
                rooms: [],
                isShow: false,
                multipleSelection: [],
            },
            teachers: [],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        beginEndTime(newValue, oldValue) {
            if (newValue) {
                this.addCourseDialog.pageCourseVo.beginTime = newValue[0];
                this.addCourseDialog.pageCourseVo.endTime = newValue[1];
            } else {
                this.addCourseDialog.pageCourseVo.beginTime = "";
                this.addCourseDialog.pageCourseVo.endTime = "";
            }
        },
    },
    //方法集合
    methods: {
        getPushInfo() {
            pushApi.getPushById(this.id, true, true).then((response) => {
                this.info = response.data.push;
                this.courses = response.data.courses;
                this.classrooms = response.data.classrooms;
            });
        },
        getAllSubject() {
            getSubject().then((response) => {
                this.subjects = response.data.cateGoryTree;
            });
        },
        getSubjectName(subjectId, subjectParentId) {
            let s1 = "",
                s2 = "",
                subjectParentIndex;
            for (let i = 0; i < this.subjects.length; i++) {
                if (
                    this.subjects[i].id === subjectParentId &&
                    subjectParentId !== 0
                ) {
                    s2 = this.subjects[i].label;
                    subjectParentIndex = i;
                    break;
                }
            }
            for (
                let i = 0;
                i < this.subjects[subjectParentIndex].children.length;
                i++
            ) {
                if (
                    this.subjects[subjectParentIndex].children[i].id ===
                    subjectId
                ) {
                    s1 = this.subjects[subjectParentIndex].children[i].label;
                }
            }
            if (s1 !== "") {
                return s2 + "/" + s1;
            } else {
                return s2;
            }
        },
        deleteCoursePush(courseId) {
            this.$confirm("确定要删除吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    pushApi
                        .deleteCoursePush(courseId, this.info.id)
                        .then((response) => {
                            this.getPushInfo();
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        });
                })
                .catch(() => {});
        },
        deleteClassPush(classId) {
            this.$confirm("确定要删除吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    pushApi
                        .deleteClassPush(classId, this.info.id)
                        .then((response) => {
                            this.getPushInfo();
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        });
                })
                .catch(() => {});
        },
        /********************************添加课程对话框******************************** */
        getCourses(page = 1) {
            this.addCourseDialog.current = page;
            this.addCourseDialog.loading = true;
            this.addCourseDialog.pageCourseVo.status = "Normal";
            pushApi
                .getCourseNotInPush(
                    this.addCourseDialog.current,
                    this.addCourseDialog.limit,
                    this.info.id,
                    this.addCourseDialog.pageCourseVo
                )
                .then((response) => {
                    this.addCourseDialog.courses = response.data.courses;
                    this.addCourseDialog.total = response.data.rows;
                    for (
                        let i = 0;
                        i < this.addCourseDialog.courses.length;
                        i++
                    ) {
                        let teacherId =
                            this.addCourseDialog.courses[i].teacherId;
                        getById(teacherId).then((response) => {
                            this.addCourseDialog.courses[i].teacherAvatar =
                                response.data.teacher.avatar;
                        });
                    }
                    this.addCourseDialog.loading = false;
                });
        },
        handleSizeChange1(val) {
            this.addCourseDialog.current = parseInt(
                (this.addCourseDialog.current * this.addCourseDialog.limit) /
                    val
            );
            this.addCourseDialog.limit = val;
            this.getCourses(this.addCourseDialog.current);
        },
        handleCurrentChange1(val) {
            this.getCourses(val);
        },
        handleSelectionChange1(val) {
            this.addCourseDialog.multipleSelection = [];
            for (var i = 0; i < val.length; i++) {
                this.addCourseDialog.multipleSelection.push(val[i].id);
            }
        },
        handleSubjectChange(val) {
            this.addCourseDialog.pageCourseVo.subjectParentId = val[0];
            this.addCourseDialog.pageCourseVo.subjectId = val[1];
        },
        addCourseToPush() {
            let obj = [];
            for (
                let i = 0;
                i < this.addCourseDialog.multipleSelection.length;
                i++
            ) {
                obj.push({
                    pushId: this.info.id,
                    courseId: this.addCourseDialog.multipleSelection[i],
                });
            }
            if (obj.length > 0) {
                pushApi.addCourseToPush(obj).then((response) => {
                    this.addCourseDialog.pageCourseVo = {};
                    this.beginEndTime = "";
                    this.addCourseDialog.multipleSelection = [];
                    this.getPushInfo();
                    this.addCourseDialog.isShow = false;
                });
            }
            this.addCourseDialog.pageCourseVo = {};
            this.beginEndTime = "";
            this.addCourseDialog.multipleSelection = [];
            this.addCourseDialog.isShow = false;
        },
        /********************************添加班级对话框******************************** */
        remoteMethod(query) {
            if (query !== "") {
                getTeacherByName(query).then((response) => {
                    this.teachers = response.data.teachers;
                });
            } else {
                this.teachers = [];
            }
        },
        pageClass(page = 1) {
            return new Promise((resolve) => {
                this.addClassDialog.current = page;
                this.addClassDialog.searchObj.status = "Normal";
                pushApi
                    .getClassNotInPush(
                        this.addClassDialog.current,
                        this.addClassDialog.limit,
                        this.info.id,
                        this.addClassDialog.searchObj
                    )
                    .then((response) => {
                        this.addClassDialog.rooms = response.data.classrooms;
                        this.addClassDialog.total = response.data.rows;
                    });
                resolve();
            });
        },
        handleSizeChange2(val) {
            this.addClassDialog.current = parseInt(
                (this.addClassDialog.current * this.addClassDialog.limit) / val
            );
            this.addClassDialog.limit = val;
            this.pageClass(this.addClassDialog.current);
        },
        handleCurrentChange2(val) {
            this.pageClass(val);
        },
        handleSelectionChange2(val) {
            this.addClassDialog.multipleSelection = [];
            for (var i = 0; i < val.length; i++) {
                this.addClassDialog.multipleSelection.push(val[i].id);
            }
        },
        addClassToPush() {
            let obj = [];
            for (
                let i = 0;
                i < this.addClassDialog.multipleSelection.length;
                i++
            ) {
                obj.push({
                    pushId: this.info.id,
                    classId: this.addClassDialog.multipleSelection[i],
                });
            }
            if (obj.length > 0) {
                pushApi.addClassToPush(obj).then((response) => {
                    this.addClassDialog.searchObj = {};
                    this.addClassDialog.multipleSelection = [];
                    this.getPushInfo();
                    this.addClassDialog.isShow = false;
                });
            }
            this.addClassDialog.isShow = false;
            this.addClassDialog.searchObj = {};
            this.addClassDialog.multipleSelection = [];
        },
        init() {
            this.getPushInfo();
            this.getAllSubject();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.init();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
p {
    font-weight: 650;
    color: rgb(32, 147, 240);
}
</style>